<template>
  <div class="group-audio">
    <custom-audio ref="audio" @up="up" @down="down" @ended="ended"></custom-audio>
  </div>
</template>

<script>
import customAudio from './audio.vue'
export default {
  name: 'groupaudio',
  components: { customAudio },
  data () {
    return {
      audios: [],
      now: null,
      autoplay: false
    }
  },
  methods: {
    /* audios [{src: 'path'}, {src: 'path'}]
     * now: index
     */
    init (audios, now = 0, autoplay) {
      this.autoplay = autoplay
      console.log(autoplay)
      console.log('init:::', audios, now)
      this.audios = audios
      this.now = now
      this.$refs.audio.setAudio({ src: this.audios[this.now].src })
    },
    clear () {
      console.log('clearggg:::')
      this.audios = []
      this.now = null
      this.autoplay = false
      this.$refs.audio.clear()
    },
    ended () {
      if (this.autoplay) {
        if (this.now === this.audios.length - 1) return
        this.down()
      }
    },
    up () {
      if (this.now === null) return
      let now = this.now
      const audios = this.audios
      if (now > 0) {
        now = now - 1
        this.now = now
        this.$refs.audio.setAudio({ src: audios[now].src })
      } else if (now === 0) {
        this.now = audios.length - 1
        this.$refs.audio.setAudio({ src: this.audios[audios.length - 1].src })
      }
    },
    down () {
      if (this.now === null) return
      let now = this.now
      const audios = this.audios
      if (now < audios.length - 1) {
        now = now + 1
        this.now = now
        this.$refs.audio.setAudio({ src: audios[now].src })
      } else if (now === this.audios.length - 1) {
        this.now = 0
        this.$refs.audio.setAudio({ src: this.audios[0].src })
      }
    }
  }
}
</script>

<style>

</style>
